<template>
    <div class="MyJiaru">
        <div class="top">
            <div class="Img">
                <h1 class="join">加入我们</h1>
                <p class="our">Join Us</p>
            </div>
        </div>
        <ul class="list">
            <li>
                <div class="list-div">
                    <div class="list-left">
                        <h2>售后客服</h2>
                        <p class="two">全职 | 社会招聘</p>
                        <p class="adress">广东 深圳市</p>
                    </div>
                    <div class="list-right">
                        <p class="time">发布时间:2019.10.25</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-div">
                    <div class="list-left">
                        <h2>视频策划、视频创意</h2>
                        <p class="two">全职 | 社会招聘</p>
                        <p class="adress">广东 深圳市</p>
                    </div>
                    <div class="list-right">
                        <p class="time">发布时间:2019.10.25</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-div">
                    <div class="list-left">
                        <h2>新媒体运营</h2>
                        <p class="two">全职 | 社会招聘</p>
                        <p class="adress">广东 深圳市</p>
                    </div>
                    <div class="list-right">
                        <p class="time">发布时间:2019.10.25</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-div">
                    <div class="list-left">
                        <h2>仓库收发货</h2>
                        <p class="two">全职 | 社会招聘</p>
                        <p class="adress">广东 深圳市</p>
                    </div>
                    <div class="list-right">
                        <p class="time">发布时间:2019.10.25</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="bottom">
            <div class="top-1">
                <ul class="list1">
                    <li>
                        <div class="list-div1">
                            <img src="" alt="">
                            <p>芝麻信用免押金租赁</p>
                        </div>
                    </li>
                    <li>
                        <div class="list-div1">
                            <img src="" alt="">
                            <p>数百万用户信赖平台</p>
                        </div>
                    </li>
                    <li>
                        <div class="list-div1">
                            <img src="" alt="">
                            <p>全员类新奇数码</p>
                        </div>
                    </li>
                    <li>
                        <div class="list-div1">
                            <img src="" alt="">
                            <p>"安心享"服务无忧体验</p>
                        </div>
                    </li>
                    <li>
                        <div  class="list-div1">
                            <img src="" alt="">
                            <p>全国多地门店自提自还</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="top-2">
                <div class="bottom-left">
                    <p class="bottom-p">
                        <img src="" alt="">
                        <span class="phone">400-880-3825</span>
                    </p>
                    <p class="p-adress">深圳市南山区高新南一道17号万德莱大厦北座306-309</p>
                    <div class="btn">
                        <img src="" alt="">
                        <span class="now">在线客服</span>
                    </div>
                    <p class="p-serve">(服务时间:9:00-18:00)</p>
                </div>
                <h3 class="nav">快捷导航</h3>
                <div class="middle">
                    <ul class="middle-list">
                        <li>首页</li>
                        <li>常见问题</li>
                        <li>加入我们</li>
                    </ul>
                    <ul class="middle-list">
                        <li>关于探物</li>
                        <li>商品测评</li>
                        <li>商务合作</li>
                    </ul>
                    <ul class="middle-list">
                        <li>产品中心</li>
                        <li>隐私条款</li>
                        <li>免费声明</li>
                    </ul>
                </div>
                <div class="bottom-right">
                    <div class="box">
                        <p class="ours">关注我们</p>
                        <img src="@/assets/img6/支付宝.png" alt="" class="fu">
                        <p class="tiyan">支付宝扫码体验</p>
                    </div>
                    <div class="box1">
                        <img src="@/assets/img6/探物.png" alt="" class="tan">
                        <p class="load">下载探物APP</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"MyJiaru"
}
</script>

<style scoped>
    .MyJiaru {
        position:absolute;
        top:76px;
        left: 0px;
    }
    .top{
        width: 100vw;
        height:476px;
        background-image: url(https://resource.tanwuapp.com/FtB9NVM3HoL_-X76OP3S64PEO5hS);
        background-size:100%;
        text-align:center;
        overflow: hidden;
    }
    .join,.our{
        color: white;
    }
    .join{
        margin-top: 170px;
        font-size: 40px;
    }
    .our{
        font-size: 29px;
    }
    .list{
        width: 100%;
        height: 655px;
        padding: 40px 348px;
        box-sizing: border-box;
    }
    .list li{
        list-style: none;
        border-bottom:1px solid #eeeeee;
        cursor: pointer;
    }
    .list-div:hover{
        transform: scale(0.95);
        transition: all 0.5s ease 0s;
    }
    .list-div:hover h2 {
        color: #3ed8c4;
    }
    .list-div{
        display: flex;
        justify-content: space-between;
    }
    h2{
        margin-bottom: 16px;
        font-size: 20px;
        margin-top: 27px;
    }
    .two{
        margin-bottom: 14px;
        color: #999999;
        font-size: 16px;
    }
    .adress{
        margin-bottom: 26px;
        font-size: 14px;
    }
    .list-right{
        margin-top: 64px;
    }
    .time{
        color: #999999;
        font-size: 14px;
    }
    .bottom{
        width: 100%;
        height: 420px;
        padding: 0 186px;
        box-sizing: border-box;
        background: #1d1d1d;
        margin-top: 80px;
    }
    .list1{
        display: flex;
        color: #d1d1d1;
        border-bottom: 1px solid #2a2a2a;
        height: 90px;
        overflow: hidden;
        justify-content: space-around;
        align-items: center;
    }
    .list1 li{
        list-style: none;
    }
    .list-div1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .list-div1 img{
        width: 38px;
        height: 42px;
        margin-right: 20px;
        box-sizing: border-box;
    }
    .bottom-p{
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-top: 50px;
    }
    .bottom-p img{
        width: 30px;
        height: 30px;
    }
    .phone{
        font-size: 18px;
    }
    .p-adress{
        color: #c7c7c7;
        font-size: 14px;
        margin-top: 12px;
    }
    .btn{
        width: 161px;
        height: 43px;
        background: #3ed8c4;
        border-radius: 30px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-bottom: 14px;
    }
    .btn img{
        width: 24px;
        height: 26px;
        margin-right: 8px;
    }
    .top-2{
        display: flex;
    }
    .now{
        color: #fff;
    }
    .p-serve{
        color: #d1d1d1;
        font-size: 14px;
    }
    .middle{
        height: 128px;
        display: flex;
        margin-top: 75px;
        margin-left: -70px;
    }
    .middle-list{
        width: 140px;
        height: 140px;
        margin-top: 21px;
    }
    .middle-list li{
        color: #d1d1d1;
        margin-bottom: 22px;
    }
    .nav{
        color: #d1d1d1;
        margin-top: 48px;
        margin-left: 20px;
    }
    .bottom-right{
        color: #d1d1d1;
        margin-top: 53px;
        margin-left: 488px;
        display: flex;
    }
    .fu{
        width: 102px;
        height: 102px;
        margin-bottom: 15px;
    }
    .ours{
        font-size: 20px;
        margin-bottom: 20px;
    }
    .tan{
        width: 102px;
        height: 102px;
        margin-top: 45px;
        margin-left: 15px;
        margin-bottom: 15px;
    }
    .load{
        margin-left: 25px;
        font-size: 14px;
    }
    .tiyan{
        font-size: 14px;
    }
</style>